<!-- 根组件模板，定义应用的整体布局 -->
<template>
    <!-- 应用主容器，根据图片存储状态设置背景图片 -->
    <div class="app" :style="{ backgroundImage: imageStore.backgroundImage ? `url(${imageStore.backgroundImage})` : 'none' }">
        <!-- 应用顶部区域 -->
        <div class="app-top">
            <!-- 顶部左侧区域 -->
            <div class="top-left">
                <!-- 时钟组件，包裹在容器背景组件内 -->
                <ContainerBg>
                    <Clock />
                </ContainerBg>
            </div>
            <!-- 顶部右侧区域 -->
            <div class="top-right">
                <!-- 倒数日期组件，包裹在容器背景组件内 -->
                <ContainerBg>
                    <CountdownDay />
                </ContainerBg>
                <!-- 日程列表组件，包裹在容器背景组件内 -->
                <ContainerBg>
                    <ScheduleList />
                </ContainerBg>
            </div>
        </div>
        <!-- 应用底部区域 -->
        <div class="app-bottom">
            <!-- 更换壁纸组件，包裹在容器背景组件内 -->
            <ContainerBg>
                <ChangeBg />
            </ContainerBg>
            <!-- 正计时组件，包裹在容器背景组件内 -->
            <ContainerBg>
                <PositiveTiming />
            </ContainerBg>
            <!-- 自定义倒计时组件，包裹在容器背景组件内 -->
            <ContainerBg>
                <CountdownTiming />
            </ContainerBg>
        </div>
    </div>
</template>

<!-- 脚本部分，使用 TypeScript 和 setup 语法 -->
<script lang="ts" setup>
// 导入容器背景组件
import ContainerBg from './component/container-bg.vue';

// 导入时钟组件
import Clock from './component/clock.vue';
// 导入倒数日期组件
import CountdownDay from './component/countdown-day.vue';
// 导入更换壁纸组件
import ChangeBg from './component/change-bg.vue';
// 导入正计时组件
import PositiveTiming from './component/positive-timing.vue'
// 导入自定义倒计时组件
import CountdownTiming from './component/countdown-timing.vue'
// 导入日程列表组件
import ScheduleList from './component/schedule-list.vue'
// 从图片存储模块导入图片存储状态管理函数
import { useImageStore } from './stores/imageStore';

// 创建图片存储实例
const imageStore = useImageStore();
</script>

<!-- 样式部分，使用 SCSS 并设置作用域 -->
<style lang="scss" scoped>
// 定义SCSS变量（黄金比例、内边距等）
$golden-ratio: 1.618;
$padding-base: 5px;

/* 主容器 */
.app {
    // 设置为弹性布局，垂直排列子元素
    display: flex;
    flex-direction: column;
    // 占满整个视口高度
    height: 100vh;
    // 占满整个宽度
    width: 100%;
    // 隐藏溢出内容
    overflow: hidden;
    // 使用基础内边距变量
    padding: $padding-base; /* 使用变量替代硬编码 */
    // 包含内边距和边框在宽度和高度内
    box-sizing: border-box;
    // 背景图片自适应容器大小
    background-size: cover;

    // 嵌套子元素（SCSS特性）
    .app-top {
        // 设置为弹性布局
        display: flex;
        // 使用黄金比例变量分配空间
        flex: $golden-ratio; /* 使用黄金比例变量 */
        // 占满整个宽度
        width: 100%;

        // 嵌套左侧区域
        .top-left {
            // 使用黄金比例变量分配空间
            flex: $golden-ratio;
            // 设置为弹性布局
            display: flex;
        }

        // 嵌套右侧区域
        .top-right {
            // 分配 1 份空间
            flex: 1;
            // 设置为弹性布局，垂直排列子元素
            display: flex;
            flex-direction: column;
        }
    }

    // 嵌套下部区域
    .app-bottom {
        // 分配 1 份空间
        flex: 1;
        // 设置为弹性布局
        display: flex;
    }
}

// 容器背景样式
.container-bg {
    // 平均分配空间
    flex: 1;
}
</style>
